<template>
  <div class="email-container">
    <div class="btn_group_left" style="margin-bottom: 20px; float: left">
      <el-button type="primary" @click="toSendEmailBtn">发送邮件</el-button>
    </div>
    <div class="btn_group_right" style="margin-bottom: 20px; float: right">
      <el-button :type="type" v-if="Form.flag" @click="changeEditFlag">
        {{
        toPutong
        }}
      </el-button>
      <el-button :type="type" v-else @click="changeEditFlag">
        {{
        toMarkdown
        }}
      </el-button>
    </div>

    <div class="Mdcantainer">
      <el-input v-model="Form.titleEmail" placeholder="请输入邮件标题" style="margin-bottom: 15px"></el-input>
      <el-select
        v-model="Form.emailSelect"
        multiple
        clearable
        collapse-tags
        filterable
        placeholder="收件人(多选)"
        style="margin-bottom: 15px; width: 100%"
      >
        <el-option
          label="全校师生"
          style="color: orange; font-weight: 700"
          value="全校师生"
          @click.native="selectAll"
        ></el-option>
        <el-option
          label="全体教师"
          style="color: skyblue; font-weight: 700"
          value="全体教师"
          @click.native="selectTeacher"
        ></el-option>
        <el-option
          label="全体学生"
          style="color: green; font-weight: 700"
          value="全体学生"
          @click.native="selectStudents"
        ></el-option>
        <el-option v-for="item in options" :key="item.u_id" :label="item.email" :value="item.email"></el-option>
      </el-select>
      <transition name="slide-fade">
        <mavon-editor
          v-if="Form.flag"
          :toolbars="toolbars"
          @imgAdd="handleEditorImgAdd"
          @imgDel="handleEditorImgDel"
          style="height: 800px"
          v-model="Form.emailContent"
          @change="change"
          ref="md"
        />
      </transition>
      <transition name="slide-fade">
        <el-input type="textarea" v-model="Form.emailContent" v-if="!Form.flag" :rows="40"></el-input>
      </transition>
    </div>
  </div>
</template>

<script>
import {
  getEmails,
  toSendEmail,
  emailImages
} from "../../api/admin-api/emailToSend";

export default {
  name: "emailToSend",
  data() {
    return {
      // 提交 数据集合
      Form: {
        // 邮件标题
        titleEmail: "",
        // 邮件内容(源文本)
        emailContent: "",
        // 收件人
        emailSelect: [],
        // 切换格式的flag
        flag: true
      },
      //切换模块

      // 点击切换变色
      type: "info",
      toPutong: "切换到普通编辑模式",
      toMarkdown: "切换到Markdown编辑模式",
      html: "",
      // 后台邮箱集合
      options: [],
      imgFile: [],
      //图片地址
      emailImg: "",

      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: false, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true // 预览
      }
    };
  },
  created() {
    // 1.查出全校师生邮箱
    // 2.查出教师邮箱
    // 3.查出学生邮箱
    // 4.个人选择
    // 根据查库里的类型 取出来判断邮箱分类
    getEmails().then(res => {
      this.options = res.data.data;
    });
  },

  methods: {
    //监听markdown变化
    change(value, render) {
      // 带有html标签的渲染结果
      this.html = render;
      // 源文本结果
      this.Form.emailContent = value;
    },

    // 发送邮件
    toSendEmailBtn() {
      if (
        !this.Form.titleEmail ||
        !this.Form.emailContent ||
        this.Form.emailSelect.length == 0
      ) {
        this.open3("输入不可为空");
      } else {
        if (this.Form.flag) {
          this.Form.emailContent = this.html;
        }
        toSendEmail(this.Form).then(res => {
          if (res.data.data.httpCode == 20000) {
            this.$message({
              type: "success",
              message: "发送邮件成功"
            });
            this.Form.emailContent = "";
            this.Form.titleEmail = "";
            this.Form.emailSelect = "";
          } else {
            this.$message({
              type: "error",
              message: "发送邮件失败"
            });
            this.Form.emailContent = "";
            this.Form.titleEmail = "";
            this.Form.emailSelect = "";
          }
        });
      }
    },

    //上传图片接口pos 表示第几个图片
    handleEditorImgAdd(pos, $file) {
      // pos图片索引  $file图片信息
      let formdata = new FormData();
      formdata.append("file", $file);
      this.imgFile[pos] = $file;
      emailImages(formdata).then(res => {
        this.emailImg = process.env.VUE_APP_FILE_API + res.data.data;
        this.$refs.md.$img2Url(pos, this.emailImg);
      });
      // this.$axios
      //   .post("http://localhost:8000/blogs/image/upload/", formdata)
      //   .then((res) => {
      //     var url = res.data.data;
      //     this.$refs.md.$img2Url(pos, url); //这里就是引用ref = md 然后调用$img2Url方法即可替换地址
      //   });
    },
    handleEditorImgDel(pos, $file) {
      // console.log("handleEditorImgDel"); //我这里没做什么操作，后续我要写上接口，从七牛云CDN删除相应的图片
      // 直接删除在页面中，后台定期使用定时任务删除
      delete this.imgFile[pos];
    },

    // 切换模式
    changeEditFlag() {
      this.Form.flag = !this.Form.flag;
    },

    // 全选邮箱
    selectAll() {
      if (this.Form.emailSelect.length < this.options.length) {
        this.Form.emailSelect = [];
        this.options.map(item => {
          this.Form.emailSelect.push(item.email);
        });
      } else {
        this.Form.emailSelect = [];
      }
    },
    // 所有教师邮箱
    selectTeacher() {
      if (this.Form.emailSelect.length < this.options.length) {
        this.Form.emailSelect = [];
        this.options.forEach(item => {
          if (item.type == 2) {
            this.Form.emailSelect.push(item.email);
          }
        });
      } else {
        this.Form.emailSelect = [];
      }
    },
    //所有学生邮箱
    selectStudents() {
      if (this.Form.emailSelect.length < this.options.length) {
        this.Form.emailSelect = [];
        this.options.forEach(item => {
          if (item.type == 3) {
            this.Form.emailSelect.push(item.email);
          }
        });
      } else {
        this.Form.emailSelect = [];
      }
    },
    open3(v) {
      this.$message({
        message: v,
        type: "warning"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all 0.5s ease;
}
.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active 用于 2.1.8 以下版本 */ {
  transform: translateX(10px);
  opacity: 0;
}
.email-container {
  padding: 30px 55px 55px;
}
</style>

